<html>
<head lang = "en">
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1"/>
	<title>注册</title>

	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript">
		function a1(){
			$.post({
				url:"/hello/regEmail",
				data:{"email":$("#email").val()},
				success: function (data){
					if(data.toString()==='occupied'){
						alert("邮箱已被注册使用!")
						// $('#email')[0].reset();
					}
					if(data.toString()==='notEmail'){
						alert(("非邮箱号!请确认后重新输入！"))
					}
					$("#email_info").html(data);
					//返回的是后端定义的数据类型（String）
				}});
		}
		function a2(){
			$.post({
				url:"/hello/regPhone",
				data:{"phoneNumber":$("#phoneNumber").val()},
				success: function (data){
					if(data.toString()==='occupied'){
						alert("手机号已被注册使用!")
					}
					if (data.toString()==='notPhone'){
						alert("手机号长度有误！请确认后重新输入！")
					}
					$("#phoneNumber_info").html(data);
					//返回的是后端定义的数据类型（String）
				}});
		}
		function a3(){
			$.post({
				url:"/hello/regPass",
				data:{"password":$("#password").val()},
				success: function (data){
					if(data.toString()==='noEnough'){
						alert("密码不得少于6位!")
					}
					$("#password_info").html(data);
					//返回的是后端定义的数据类型（String）
				}});
		}
		function login() {
			$.post({
				url:"/hello/successGo",
				data:{"name":$("#name").val(),"email":$("#email").val(),"phoneNumber":$("#phoneNumber").val(),"password":$("#password").val(),"password2":$("#password2").val()},
				success:function (data) {
					alert(data.toString())
					if (data.toString() === 'login'){
						//alert("注册成功！")
						window.open("http://127.0.0.1:8080/hello/load","_self")
					}
					if (data.toString() === 'kong'){
						alert("有注册项为空，请确认填写！");
					}
					if (data.toString() === 'password2wrong'){
						alert("确认密码与第一次输入不同！");
					}
					if (data.toString() === 'default'){
						alert("手机号或邮箱已被注册！")
						document.getElementById("from2").reset();
						// window.open("http://127.0.0.1:8080/hello/register","_self")
					}
					$("#account_info").html(data);
				}
			});
		}


	</script>

	<style type="text/css">
		/* body{
            padding-top: 50px;
        } */
		.starter{
			padding-top: 250px;
			padding-left: 200px;
		}
		.lead{
			padding-left: 200px;
		}
		#button_group{
			text-align: center;
		}
		.load_form{
			position: absolute;
			top: 200px;
			left: 800px;
		}
	</style>
</head>
<body>
<div class="container" style="width: 100%; height: 100%; background-image: linear-gradient(to top, #FFCCCC, #9900FF);">
	<div class="starter" style="width: 50%; height: 100%">
		<h1><font style=" font-weight: bold;font-style: italic;font-size:110px; color: #660066; ">Hunter</font></h1>
		<p class="lead"><span style="font-size:30px; color: #660066; ">狩猎属于你的电脑</span></p>
	</div>

	<div class="load_form" style=" width: 40%; height: 50%; background-color: #7429A7;">
		<div id="load_registe" style="display:inline-block;width: 20%;height: 100%;">
			<button type="button" style="background-color: #955BC8;color: white;width: 100%;height: 50%;font-size: 20px;">注册</button>
			<a href="load.html"><button type="button" style="background-color: #7D4AB7;color: white;width: 100%;height: 50%;font-size: 20px;">登录</button></a>
		</div>

		<div id="load" style="display:inline-block;position: absolute;top: 1%;left: 30%;width: 50%;height: 100%;">
			<form name="form2" id="regUser">
				<label for="name" style="color: white;margin-left: 20px;">邮箱</label>
				<input type="text" class="form-control" id="email" name="email" onblur="a1()" placeholder="邮箱" style="width: 100%;height: 8%;margin-top: 1px;margin-left: 20px;" />
				<label for="name" style="color: white;margin-top: 5px;margin-left: 20px;">手机</label>
				<input type="text" class="form-control" id="phoneNumber" name="phoneNumber" onblur="a2()" placeholder="手机" style="width: 100%;height: 8%;margin-top: 1px;margin-left: 20px;" />
				<label for="name" style="color: white;margin-top: 5px;margin-left: 20px;">用户名</label>
				<input type="text" class="form-control" id="name" name="name" placeholder="用户名" style="width: 100%;height: 8%;margin-top: 1px;margin-left: 20px;" />
				<label for="name" style="color: white;margin-top: 5px;margin-left: 20px;">密码</label>
				<input type="password" class="form-control" id="password" name="password" onblur="a3()" placeholder="密码" style="width: 100%;height: 8%;margin-top: 1px;margin-left: 20px;" />
				<label for="name" style="color: white;margin-top: 5px;margin-left: 20px;">确认密码</label>
				<input type="password" class="form-control" id="password2" name="password2" placeholder="确认密码" style="width: 100%;height: 8%;margin-top: 1px;margin-left: 20px;" />
				<button class="btn btn-primary" onclick="login()" style="display:inline-block;width: 100%;margin-top: 10px;margin-left: 20px;">注册</button>
				<!--						<button type="button" class="btn btn-primary" style="display:inline-block;width: 200px;margin-top: 20px;margin-left: 50px;">注册</button>-->
			</form>
		</div>

	</div>

</div>
<!--			<script src="js/jquery-3.4.1.min.js"></script>-->
<!--			<script src="js/bootstrap.min.js"></script>-->
<!--			<script src="js/echarts.min.js"></script>-->
</body>
</html>
